import React, { useState } from 'react';

import MarkdownRenderer from '@/components/MarkdownRenderer';
import SvgIcon from '@/components/SvgIcon';
import { formatText } from '@/utils/textFormatter';

import { useAIApi } from '../../hooks/useAIApi';

interface Message {
	role: string;
	content: string;
}

interface AssistantTabProps {
	messages: Message[];
	onMessagesChange: (messages: Message[]) => void;
}

const AssistantTab: React.FC<AssistantTabProps> = ({ messages, onMessagesChange }) => {
	const [input, setInput] = useState('');
	const { callQwen3APIList, isAssistant, setIsAssistant } = useAIApi();

	const handleSendMessage = async () => {
		if (!input.trim()) return;

		setIsAssistant(true);
		const newMessage = [
			...messages,
			{
				role: 'user',
				content: input
			}
		];
		onMessagesChange(newMessage);
		setInput('');

		try {
			const res = await callQwen3APIList(newMessage);
			if (res?.choices?.[0]) {
				onMessagesChange([
					...newMessage,
					{
						role: 'assistant',
						content: res?.choices?.[0]?.message?.content
					}
				]);
			}
		} catch (error) {
			console.error('发送消息失败:', error);
		} finally {
			setIsAssistant(false);
		}
	};

	const handleKeyPress = (e: React.KeyboardEvent) => {
		if (e.key === 'Enter' && !e.shiftKey) {
			e.preventDefault();
			if (!isAssistant) {
				handleSendMessage();
			}
		}
	};

	return (
		<div className="flex-col flex-1 px-8 py-6">
			<div className="text-5 font-medium mb-4">AI小助手</div>

			{/* 聊天区域 */}
			<div className="bg-gray-100 p-4 rounded-lg h-[420px] overflow-auto">
				{messages.length === 0 && (
					<>
						<div className="text-gray-700 mb-4">
							您好，我是您的AI会议助手，有什么可以帮助您的吗？
						</div>
						<div className="text-gray-500 text-sm">
							您可以询问我关于会议纪要的问题，或者让我帮您总结会议要点。
						</div>
					</>
				)}

				<div className="chart-item-content">
					{messages.map((msg: any, index) => (
						<div
							key={index}
							className={`chat-item ${msg.role === 'assistant' ? 'assistant' : 'user'}`}
						>
							<div className="chart-img">
								<SvgIcon
									className="text-8"
									localIcon={msg?.role === 'assistant' ? 'icon-assistant' : 'icon-user'}
								/>
							</div>
							<div className="chat-content-wrap">
								<div className="chat-content">
									<MarkdownRenderer content={formatText(msg?.content)} className="chat-markdown" />
								</div>
							</div>
						</div>
					))}

					{isAssistant && (
						<div className="chat-item assistant">
							<div className="chart-img">
								<SvgIcon className="text-8" localIcon="icon-assistant" />
							</div>
							<div className="chat-content-wrap">
								<div className="chat-content">正在思考中...</div>
							</div>
						</div>
					)}
				</div>
			</div>

			{/* 输入区域 */}
			<div className="w-full pb-4 pt-6">
				<div className="w-full pt-4 relative">
					<AInput.TextArea
						rows={4}
						className="w-full h-20"
						placeholder="请输入"
						value={input}
						onChange={e => setInput(e.target.value)}
						onKeyDown={handleKeyPress}
						disabled={isAssistant}
					/>
					<div className="absolute right-2 bottom-4 flex-center">
						<SvgIcon localIcon="icon-link" className="mr-1 text-6" />
						<SvgIcon
							localIcon="icon-send"
							className={`mr-1 text-6 ${isAssistant ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}
							onClick={() => {
								if (!isAssistant) {
									handleSendMessage();
								}
							}}
						/>
					</div>
				</div>
			</div>
		</div>
	);
};

export default AssistantTab;
